<template>
  <!-- #ifdef H5 -->
    <mtitles  title="美团核销" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
    <!-- #endif -->
	<view class="container">
		<view class="padding-top-sm tip_box padding-lr-sm">
			<view class="mainTips bgz flex align-center text-norange">
				<text class="acon-a-tishi1 macon padding-lr-sm"></text>
				<view class="flex-sub">一码一券，兑换完毕券号将自动核销</view>
			</view>
		</view>
		<view class="topSec flex flex-direction justify-center text-center">
			<view class="imgbox" :class="{dz:imgList.length>1}">
				<view v-for="(item,index) in imgList" :key="index" :style="{zIndex:imgList.length-index}"
					class="imgItem d_ib p_rlt">
					<image class="img" :src="item" mode="aspectFill"></image>
				</view>
			</view>
			<view class="padding-top text-lg">
				美团、大众点评自助验券
			</view>
		</view>
		<view class="padding-lr60">
			<view class="cu-bar search bg-white">
				<view class="search-form round padding-left">
					<!-- :focus="turnSearch" @blur="seachTech('blur')" confirm-type="search"-->
					<input class="seinput" placeholder-style="font-size:28rpx" v-model="codeValue" type="number"
						maxlength="11" placeholder="请输入核销券码" />
					<text class="cuIcon-scan seachIco"></text>
				</view>
			</view>
			<view class="sub_btn text-white text-acenter" @click="mnavTo('/pages/others/checkComplete/checkComplete')">
				我要兑换
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow, onLoad } from '@dcloudio/uni-app';
	import {  mnavTo } from '@/utils/helper';
	const imgList = ref([
		'https://cdn-static.yekjx.com/subscribe/images/checkico0.png',
		'https://cdn-static.yekjx.com/subscribe/images/checkico1.png',
		'https://cdn-static.yekjx.com/subscribe/images/checkico2.png'
	])
	const codeValue = ref('')
</script>

<style lang="scss">
	.tip_box {
		min-height: 60rpx;
	}

	.mainTips {
		line-height: 60rpx;
		border-radius: 8rpx;
		background: rgba(254, 180, 72, 0.15);
	}

	.topSec {
		height: 30vh;
	}

	.imgbox {
		&.dz {
			.imgItem {
				margin-left: -38rpx;
			}
		}
	}

	.imgItem,
	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.search {
		width: 100%;
		height: 96rpx;
		border: 1px solid #56bf7a;
		box-sizing: border-box;
		box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
		border-radius: 96rpx;
	}

	.seachIco {
		margin: 0 !important;
		padding: 0 1em;
		font-size: 40rpx;
		color: #56bf7a;
	}

	.search-form {
		background-color: #fff !important;

		.seinput {
			font-size: 36rpx;
		}
	}

	.padding-lr60 {
		padding: 0 60rpx;
	}

	.sub_btn {
		width: 100%;
		height: 100rpx;
		border-radius: 100rpx;
		background: #56bf7a;
		margin-top: 70rpx;
	}
</style>